<template>
    <div>
        <div class="cTitle">找回密码</div>

        <el-form :model="findForm" :rules="findRules" ref="findForm" class="demo-ruleForm" status-icon>

            <div style="margin-bottom: 5%">
                <el-form-item prop="findTelphone">
                    <el-input
                            placeholder="请输入注册的手机号码"
                            maxlength="11"
                            v-model.number="findForm.findTelphone"
                            autocomplete="off">
                        <!--                                <i slot="prefix" class="phonePic"></i>-->
                    </el-input>
                </el-form-item>
            </div>
            <div style="margin-bottom: 5%">
                <el-form-item prop="findPassword">
                    <el-input
                            placeholder="请输入新密码"
                            type="password"
                            v-model="findForm.findPassword"
                            autocomplete="off">
                        <!--                                <i slot="prefix" class="passPic"></i>-->
                    </el-input>
                </el-form-item>
            </div>
            <div style="display: flex;overflow:hidden;">
                <el-form-item prop="findPic" style="float:left;display: inline-block;">
                    <el-input
                            placeholder="请输入图形验证码"
                            autocomplete="off"
                            v-model="findForm.findPic"
                          >
                        <!--                        <i slot="prefix" class="codePic"></i>-->
                    </el-input>
                </el-form-item>
                <img style="width: 172px;height: 42px;cursor:pointer;float:right;display:inline-block;" :src="qrcodeUrl" alt="点击切换" title='点击切换' @click="getQRCode">
            </div>


            <div style="margin-bottom: 5%;display: flex;justify-content: space-between;">
                <el-form-item prop="findMsg" style="margin-bottom: 0px;display:inline-block;float:left;">
                    <el-input
                        placeholder="填写短信验证码"
                        v-model="findForm.findMsg"
                        autocomplete="off"
                        @keyup.enter.native="submitForm('findForm')"
                    >
                            
                    </el-input>
                </el-form-item>

                <el-button style="display:inline-block;" type="info" plain @click="getPhoneCode" :disabled="btnDisabled">{{button}}</el-button>
            </div>
            <div>
                <el-form-item>
                    <el-button class="regButton" @click="submitForm('findForm')">重设密码</el-button>
                </el-form-item>
            </div>
        </el-form>
        <div class="regBtnBottom">
            <!--<img src="../../static/images/register/youxaingzhaohui@2x.png">-->
            <div></div>
            <div style="color: #2d9fd8;cursor: pointer" @click="changeShow(2)">返回登录</div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "findPassword",
        data() {
            //找回手机号验证
            var checkFindPhone = (rule, value, callback) => {
                var myreg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
                var numLength = value.toString().length
                this.findForm.findTelphone = value
                if (!value) {
                    return callback(new Error('请检查或重新输入手机号'));
                }
                setTimeout(() => {
                    if (!Number.isInteger(value)) {
                        callback(new Error('请输入数字值'));
                    } else {
                        if (numLength < 11 || !myreg.test(value.toString())) {
                            callback(new Error('请检查填写正确的手机号码'));
                        } else {
                            callback();
                        }
                    }
                }, 500);
            };
            //新密码验证
            var validateNewPass = (rule, value, callback) => {
 
                var nameLength = value.toString().length
                console.log(nameLength)
                this.findForm.findPassword = value
                if (value === '') {
                    return callback(new Error('请输入新密码'));
                }
                setTimeout(() => {
                    if (Number.isInteger(value)) {
                        callback(new Error('请输入中英文'));
                    } else {
                        if (value !== '') {
                            if (nameLength < 5) {
                                callback(new Error('请输入超过4个字符'));
                            } else {
                                callback();
                            }
                        }
                    }
                }, 500);

            };
            //图片验证
            var validatePic = (rule, value, callback) => {
                console.log(value)
                try {
                    this.$get('/judge',{
                        uuid:localStorage.getItem("uid"),
                        verificationCode:value
                    }).then(res=>{
                        console.log(res)
                        this.qrCodeIsright = res.data;
                    })
                } catch (error) {
                    
                }
                var passLength = value.length
                this.findForm.findPic = value
                if (value === '') {
                    callback(new Error('请输入图形验证码'));
                } else {
                    if (value !== '') {
                        if (passLength < 5) {
                            callback(new Error('请输五个以上的字符'));
                        }
                    }
                    callback();
                }
            };
            //短信验证
            var validateMsg = (rule, value, callback) => {
                var codeLength = value.length
                this.findForm.findMsg = value
                if (value === '') {
                    callback(new Error('请输入验证码'));
                } else {
                    if (value !== '') {
                        console.log("ok")
                    }
                    callback();
                }
            };
            return {
                qrCodeIsright:false,
                button: '获取验证码',
                btnDisabled: false,
                totalTime: 60,     //记录具体倒计时时间
                //切换登录注册
                showFind: '',
                //验证码路径
                qrcodeUrl: '',
                //找回密码表单验证
                findForm: {
                    findTelphone: '',
                    findPassword: '',
                    findPic: '',
                    findMsg: '',
                },
                findRules: {
                    findTelphone: [
                        {validator: checkFindPhone, trigger: 'blur'}
                    ],
                    findPassword: [
                        {validator: validateNewPass, trigger: 'blur'}
                    ],
                    findPic: [
                        {validator: validatePic, trigger: 'blur'}
                    ],
                    findMsg: [
                        {validator: validateMsg, trigger: 'blur'}
                    ],
                },
            }
        },
        created() {
            this.getQRCode();
        },
        methods: {
            //验证图片验证码
            validatePassword(){
                console.log(findForm.findPic)
            },
            //切换成登录注册
            changeShow(e) {
                this.showFind = e;
                this.$emit('findShow', this.showFind)
            },

            // 获取验证码
            getQRCode() {
                this.$get("/verification_code").then(res => {
                    // console.log(res.data);
                    this.qrcodeUrl = 'data:image/jpg;base64,' + res.data
                })
            },

            //倒计时
            countdown() {
                this.button = this.totalTime + 's后重新发送'
                this.btnDisabled = 'disabled'
                let clock = window.setInterval(() => {
                    this.totalTime--
                    this.button = this.totalTime + 's后重新发送'
                    if (this.totalTime < 0) {
                        window.clearInterval(clock)
                        this.button = '重新发送验证码'
                        this.totalTime = 60
                        this.btnDisabled = false
                    }
                }, 1000)
            },
            // 获取短信验证码
            getPhoneCode() {
                setTimeout(()=>{
                    if(!this.qrCodeIsright){
                        layer.msg('请填写正确的验证码',{
                            time:1000
                        })
                        return;
                    }
                    
                    
                    var myreg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
                    if (this.findForm.findTelphone < 11 || !myreg.test(this.findForm.findTelphone.toString())) {
                        layer.msg('请检查或重新输入手机号')
                        return
                    };
                    this.$post("api/v1/sms/code", {
                        'mobile': this.findForm.findTelphone,
                        'type': 6,
                    }).then(res => {
                        if (res.code != 200) {
                            console.log(res)
                            layer.msg(res.msg)
                            // this.$message(res.msg)
                        } else {
                            console.log(res)
                            // this.$message("验证码已发送，注意查收")
                            this.countdown()
                        }
                    })
                },500)
                // var myreg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
                // if (this.findForm.findTelphone < 11 || !myreg.test(this.findForm.findTelphone.toString())) {
                //     layer.msg('请检查或重新输入手机号')
                //     return
                // };
                // this.$post("api/v1/sms/code", {
                //     'mobile': this.findForm.findTelphone,
                //     'type': 6,
                // }).then(res => {
                //     if (res.code != 200) {
                //         console.log(res)
                //         layer.msg(res.msg)
                //         // this.$message(res.msg)
                //     } else {
                //         console.log(res)
                //         // this.$message("验证码已发送，注意查收")
                //         this.countdown()
                //     }
                // })
                
            },

            //重设密码
            resetPassword() {
                this.$patch('/password', {
                    "code": this.findForm.findMsg,
                    "identifier": this.findForm.findTelphone,
                    "password": this.findForm.findPassword,
                    "type": "0",
                    "imgCode": this.findForm.findPic,
                    "uuId": localStorage.getItem("uid")
                }).then(res => {
                    console.log(res)
                    if (res.code != 200) {
                        layer.msg(res.msg)
                        // this.$message(res.msg)
                    } else {
                        layer.msg('重设密码成功，即将跳转到登录页面')
                        // this.$message()
                        let clock = setTimeout(() => {
                            this.changeShow(2)
                        }, 3000)
                    }
                })
            },

            //验证表单
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.resetPassword()
                    } else {
                        // console.log('error submit!!');
                        return false;
                    }
                });
            },
        }
    }
</script>

<style lang="scss">
    .register {
        height: 100vh;
        background-image: url("../../static/images/register/beijing@2x.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        .register-content {
            width: 460px;
            background-color: #FFFFFF;
            top: 25%;
            position: absolute;
            border-radius: 3%;

            .limitWidth {
                margin: 5% 9%;
                text-align: center;

                .cTitle {
                    font-size: 25px;
                    margin: 15px 15px;
                }

                .el-input__inner {
                    /* height: 55px; */
                    padding-left: 15px;
                }

                .phonePic {
                    background-image: url("../../static/images/register/电话@2x.png");
                    background-repeat: no-repeat;
                    width: 43px;
                    height: 100%;
                    position: absolute;
                    top: 3px;
                }

                .codePic {
                    background-image: url("../../static/images/register/用户名@2x.png");
                    background-repeat: no-repeat;
                    width: 43px;
                    height: 100%;
                    position: absolute;
                    top: 3px;
                }

                .passPic {
                    background-image: url("../../static/images/register/密码@2x.png");
                    background-repeat: no-repeat;
                    width: 43px;
                    height: 100%;
                    position: absolute;
                    top: 3px;
                }

                .regButton {
                    background-image: url("../../static/images/register/矩形 3 拷贝 3.png");
                    background-size: 100% 100%;
                    background-repeat: no-repeat;
                    width: 100%;
                    color: #FFFFFF;
                    font-size: 20px;
                    letter-spacing: 5px;
                }

                .regBtnTop {
                    margin-bottom: 3%;
                    display: flex;
                    justify-content: space-between;
                    align-items: baseline;
                    margin-right: 5%;
                    margin-left: 5%
                }

                .regBtnBottom {
                    margin-bottom: 5%;
                    display: flex;
                    justify-content: space-between;
                    align-items: baseline;

                    .bottomReg {
                        display: flex;

                        .brOne {
                            color: gray;
                            margin-right: 5px
                        }

                        .brTwo {
                            color: #2d9fd8
                        }
                    }
                }
            }
        }

        .register-footer {
            bottom: -5%;
            position: absolute;
            height: 10px;

            .footerUp {
                display: flex;
                justify-content: space-around;
                width: 400px;
            }

            .footerMiddle {
                color: grey;
            }

            .footerDown {
                color: grey;
            }
        }

        .cusCenter {
            position: absolute;
            width: 350px;
            top: 40%;
            left: 40%;
            cursor: pointer;
            z-Index: 9999;

            .cuTitle {
                color: white;
                font-size: 23px;
                text-align: center;
                margin-bottom: 5%;
            }

            .cusBg {
                background-image: url("../../../public/static/images/regFooter/beijing@2x.png");
                background-size: 100% 100%;
                background-repeat: no-repeat;
                height: 150px;
            }

            .cuCon {
                display: flex;
                margin: 1% 10%;
                align-items: flex-end;

                img {
                    width: 20px;
                    height: 20px;
                }
            }
        }
    }

    .shadow {
        position: absolute;
        left: 0px;
        top: 0px;
        background: rgba(0, 0, 0, 0.4);
        width: 100%; /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
        height: 120%;
        /*filter: alpha(opacity=60); !*设置透明度为60%*!*/
        /*opacity: 0.6; !*非IE浏览器下设置透明度为60%*!*/
        display: none;
        z-Index: 999;
    }
</style>